<template>
    <el-row style="width: 100%">
        <el-col :span="12">
            <el-form label-width="80px" :model="report">
                <el-form-item label="名称" prop="name">
                    <el-input placeholder="请输入名称" v-model="report.name"></el-input>
                </el-form-item>
                <el-form-item label="路径" prop="path">
                    <el-upload
                            :limit="1"
                            action="/api/report/reportIndex/upload"
                            :on-success="handleSuccess"
                    >
                        <el-button type="primary">上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="类型" prop="indexType">
                    <el-select v-model="report.indexType" placeholder="请选择类型">
                        <el-option
                                v-for="item in indexTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="编码" prop="reportCategoryCode">
                    <el-input placeholder="请输入编码" v-model="report.reportCategoryCode"></el-input>
                </el-form-item>
                <el-form-item label="语言" prop="indexLang">
                    <el-select v-model="report.indexLang" placeholder="请选择语言">
                        <el-option
                                v-for="item in indexLangOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="序号" prop="sequence">
                    <el-input placeholder="请输入序号" type="number" v-model.number="report.sequence"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="$router.go(-1)">返回</el-button>
                    <el-button @click="saveReport" :loading="loading.button.save" type="primary">确定</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data() {
            return {
                loading: {
                    button: {
                        save: false
                    }
                },
                reportId: null,
                report: {},
                indexTypes: [
                    { label: '小时', value: 'report_hour' },
                    { label: '4小时', value: '4hour_report' },
                    { label: '班报表', value: 'report_class' },
                    { label: '日报表', value: 'report_day' },
                    { label: '周表报', value: 'report_week' },
                    { label: '月表报', value: 'report_month' },
                    { label: '年表报', value: 'report_year' }
                ],
                indexLangOptions: [
                    { label: '中文', value: 'cn_zh' },
                    { label: '英文', value: 'en' },
                    { label: '中国台湾', value: 'cn_tw' },
                ],
            };
        },
        methods: {
            handleSuccess({ data, code, message }) {
                if (code === 200) {
                    this.report.path = data;
                    this.$message.success('上传成功');
                    return;
                }
                this.$message.warning(message);
            },
            saveReport() {
                this.loading.button.save = true;
                this.$api.request({
                    path: 'template/update',
                    data: this.report
                })
                    .then(() => {
                        this.$message.success('保存成功');
                        this.$router.go(-1);
                    })
                    .catch(() => {
                        this.loading.button.save = false;
                    })
            },
            getDetail() {
                this.$api.request({
                    path: 'template/detail',
                    data: {
                        id: this.reportId
                    }
                })
                    .then(({ data }) => {
                        this.report = data;
                    })
            }
        },
        created() {
            debugger
            const { id } = this.$route.params;
            if (id) {
                this.reportId = id;
                this.getDetail();
            }
        }
    };
</script>
<style lang="scss">
    .template-box {
        width: 100%;
        .title {
            margin: 12px;
        }
        .el-select {
            width: 100%;
        }
    }
</style>


